<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div class="artistAdd" v-if="!isApp">
      <p class="title">艺人信息</p>
      <div>
        <p class="right_title" style="float: left; width: 30%;">
          <img style="width: 30px;height: 30px;margin-right: 10px" src="../../assets/logo2.png">
          <span>基本信息</span>
        </p>
        <div style="display:flex;flex-direction:row;float: right">
          <div v-if="$route.query.share != 1" class="share" @click="dialogVisible = true;">
            <span>分享</span>
          </div>
          <div v-if="$route.query.login == true" class="logout" @click="goLogin">退出登录</div>
        </div>
      </div>
      <span v-show="form.isAudit == 2" style="color: #b3302e;">审核不通过原因：{{form.auditContent}}</span>
      <el-row :gutter="24" style="clear: both;">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-input">
          <el-col :span="8">
            <el-form-item label="姓名/艺名">
              {{form.realName}}
            </el-form-item>
            <el-form-item label="监护人姓名">
              {{form.guardian}}
            </el-form-item>
            <el-form-item label="微信号" v-show="form.isOperation == 1">
              {{form.wechatNumber}}
            </el-form-item>
            <el-form-item label="国籍">
              {{form.nationality}}
            </el-form-item>
            <el-form-item label="语言">
              {{form.languageName}}
            </el-form-item>
            <el-form-item label="职业">
              {{form.jobName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="性别" prop="sex">
              {{form.sex == 1 ? "男" : "女"}}
            </el-form-item>
            <el-form-item label="手机号" v-show="form.isOperation == 1">
              {{form.phone}}
            </el-form-item>
            <el-form-item label="身高">
              {{form.height}}cm
            </el-form-item>
            <el-form-item label="所在城市">
              {{form.cityName}}
            </el-form-item>
            <el-form-item label="学校">
              {{form.schoolID}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期">
              {{form.birthday}}
            </el-form-item>
            <el-form-item label="体重">
              {{form.weight}}kg
            </el-form-item>
            <el-form-item label="标签">
              {{form.typeList}}
            </el-form-item>
            <el-form-item>
              &nbsp;
            </el-form-item>
            <el-form-item label="专业">
              {{form.professionalID}}
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item v-for="(domain, index) in form.fansList"
                      label="粉丝数"
                      :key="domain.key"
                      :prop="'domains.' + index + '.value'">
          <el-form-item label>
            平台：{{domain.fansTypeName}}
            粉丝：{{domain.fansNumber}}万
            地址:<a target="view_window" :href="domain.fansUrl">{{domain.fansUrl}}</a>
          </el-form-item>
        </el-form-item>
        <el-form-item label="期望薪资" v-for="(domain, index) in form.salaryList"
                      :key="domain.key"
                      :prop="'domains.' + index + '.value'" v-show="form.isOperation == 1">
          <el-form-item label>
            {{domain.salaryPrice}}
            {{domain.salaryTypeName}}
          </el-form-item>
        </el-form-item>
      </el-form>
      <p class="right_title">
        <img style="width: 30px;height: 30px;margin-right: 10px;" src="../../assets/logo2.png">
        <span>形象展示</span>
      </p>
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item label="封面">
          <img v-image-preview style="width: auto; height: 200px; margin-right: 15px" v-for="domain in coverList"
               :src="domain.coverUrl"/>
        </el-form-item>
        <el-form-item label="个人照片">
          <img v-image-preview style="width: auto; height: 160px; margin-right: 15px" v-for="domain in form.photoList"
               :src="domain.fileUrl"/>
        </el-form-item>
        <el-form-item label="个人视频">
          <video style="width: auto; height: 150px; margin-right: 15px" v-for="domain in form.videoList"
                 :src="domain.fileUrl" controls="controls"/>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in form.worksUrl"
          :label="'作品地址'"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="{}">
          <a style="word-wrap:break-word;" target="view_window" :href="domain">{{domain}}</a>
        </el-form-item>
        <el-form-item label="个人简介">
          <div
            class="introduction">
            {{form.personalContent}}
          </div>
        </el-form-item>
        <el-form-item label v-show="form.isOperation == 1">
          <div class="create" @click="submit">
            <span>修改/注册信息</span>
          </div>
        </el-form-item>
      </el-form>

      <el-dialog title="分享" :visible.sync="dialogVisible" width="40%">
        <div class="dialog_look">
          <span style="width: 65%;">{{shareUrl}}</span>
          <el-button style="margin-left: 80%;" v-clipboard:copy="shareUrl" v-clipboard:success="copySuccess">复制链接
          </el-button>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="dialog_text" @click="dialogVisible = false">
            <span>确认</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <div v-if="isApp">
      <img style="width: 100%;height: auto;" :src="form.cover"/>
      <div class="appClass">
        <div class="nameList">
          <div style="font-size: 24px;font-weight: bold">{{form.realName}}</div>
          <div v-if="form.sexName === '男'" style="background: #5e9de6;color: #fff;padding: 0px 4px;margin-left: 4px">
            {{form.age}}岁
          </div>
          <div v-if="form.sexName === '女'" style="background: #f19ec2;color: #fff;padding: 0px 4px;margin-left: 4px">
            {{form.age}}岁
          </div>
        </div>
        <div style="padding: 4px 0px;font-size: 20px;color: gray">{{form.jobName}}</div>
        <div class="appLabel">
          <div class="grayColor">身高</div>
          <div class="split"></div>
          <div>{{form.height}}cm</div>
        </div>
        <div class="appLabel">
          <div class="grayColor">体重</div>
          <div class="split"></div>
          <div>{{form.weight}}kg</div>
        </div>
        <div class="appLabel">
          <div class="grayColor">所在城市</div>
          <div class="split"></div>
          <div>{{form.cityName}}</div>
        </div>
        <div class="appLabel">
          <div class="grayColor">语言</div>
          <div class="split"></div>
          <div>{{form.languageName}}</div>
        </div>
        <div class="appLabel">
          <div class="grayColor">学校</div>
          <div class="split"></div>
          <div>{{form.schoolName}}</div>
        </div>
        <div class="appLabel">
          <div class="grayColor">专业</div>
          <div class="split"></div>
          <div>{{form.professionalID}}</div>
        </div>
        <div class="title">形象展示</div>
        <img style="width: 100%; height: auto;" v-for="domain in form.photoList"
             :src="domain.fileUrl"/>
        <video style="width: 100%; height: auto;" v-for="domain in form.videoList"
               :src="domain.fileUrl" :poster="domain.videoImg" controls="controls"/>
        <div class="title">粉丝数</div>
        <div style="padding: 4px 0px" v-for="domain in form.fansList">
          <div style="display: flex;flex-direction: column;padding: 4px 0px">
            <div>平台：{{domain.fansTypeName}}</div>
            <div>粉丝：{{domain.fansNumber}}万</div>
            <div>地址:<a :href="domain.fansUrl">{{domain.fansUrl}}</a></div>
          </div>
        </div>
        <div class="title">作品地址</div>
        <div v-for="domain in form.worksUrl">
          <a style="word-wrap:break-word;" :href="domain">{{domain}}</a>
        </div>
        <div class="title">个人简介</div>
        <div
          class="introduction">
          {{form.personalContent}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shareUrl: window.location.href + '&share=1',
        dialogVisible: false,
        form: {
          realName: "", //姓名
          sex: "", //性别 1男 0 女
          birthday: "", //出生年月
          phone: "", //手机号码
          height: "", //身高
          weight: "", //体重
          nationalityID: "", //国籍
          cityID: "", //所属城市ID集合
          languageID: "", //语言ID集合
          schoolID: "", //学校ID集合
          professionalID: "", //专业ID集合
          jobID: "", //职业ID集合
          photoID: "", //照片ID集合
          videoID: "", //视频ID集合
          worksUrl: "", //作品ID集合
          salaryPrice: "", //薪资金额
          salaryType: "", //薪资类型
          personalContent: "", //个人简介
          guardian: "", //监护人姓名
          wechatNumber: "", //微信号
          fansData: [{
            fansType: '',
            fansNumber: '',
            fansUrl: ''
          }],
          photoList: [],
          videoList: [],
          isOperation: 0
        },
        worksList: [{
          value: ''
        }],
        coverList: [],
        // 城市
        cityList: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        cityListPlace: [],
        selectOptions: [],
        // 职业
        jobList: [],
        // 学校
        schoolList: [],
        // 粉丝
        fansList: [],
        // 国籍
        raceList: [],
        // 语言
        languageList: [],
        // 专业
        professionalList: [],
        // 性别
        sexList: [
          {
            label: "男",
            value: "1"
          },
          {
            label: "女",
            value: "2"
          }
        ],
        // 薪资类型
        salaryList: [
          {
            label: "元/小时",
            value: "1"
          },
          {
            label: "元/件",
            value: "2"
          },
          {
            label: "元/天",
            value: "3"
          }
        ],
        // 设置红点
        rules: {
          realName: [{required: true, message: "请输入姓名", trigger: "blur"}],
          sex: [{required: true, message: "请选择性别", trigger: "change"}],
          birthday: [{required: true, message: "请选择出生日期", trigger: "change"}],
          phone: [{required: true, message: "请输入手机号", trigger: "blur"}],
          height: [{required: true, message: "请输入身高", trigger: "blur"}],
          weight: [{required: true, message: "请输入体重", trigger: "blur"}],
          jobID: [{required: true, message: "请选择职业", trigger: "change"}],
          languageID: [{required: true, message: "请选择语言", trigger: "change"}],
        },
        radio: "1",
        dialogImageUrl: "",
        dialogVisible: false,
        formDate: "",
        isApp: false,
      };
    },
    mounted() {
      // // 获取属性
      // this.getCity();
      this.isApp = this.isMobilePhone();
      this.getArtistDetail();
    },
    methods: {
      getArtistDetail() {
        let url = "";
        let params = {};
        let userRole;
        if (this.$route.query.share == 1) {
          url = "/Category/getUserShareActorInfo";
          params.actorUid = this.$route.query.uid;
          userRole = this.$route.query.userRole;
        }
        else {
          url = "/User/getUserActorInfo";
          params.token = this.globalData.token;
          let role = sessionStorage.getItem("userrole");
          if (role === '1') {
            params.actorUid = sessionStorage.getItem("uid");
          } else {
            params.actorUid = this.$route.query.uid;
          }

        }
        this.$fetch(url, params).then(res => {
          if (res.code == "200") {
            this.form = res.data.userInfo;
            this.coverList = [{'coverUrl': this.form.cover}];
            let role = sessionStorage.getItem("userrole");
            if (role === '1') {
              this.form.isOperation = 1;
            } else {
              this.form.isOperation = this.$route.query.isOperation;
            }
            console.log(userRole);
          }
        });
      },
      copySuccess() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      },
      // 提交/
      submit() {
        this.form.fansData = this.form.fansList;
        console.log(this.form);
        sessionStorage.siteInfo = JSON.stringify(this.form);
        this.$router.push({path: '/artistAdd', query: {type: 'modify', userRole: this.$route.query.userRole}});
      },
      addDomain() {
        this.worksList.push({
          value: '',
          key: Date.now()
        });
      },
      removeDomain(item) {
        var index = this.worksList.indexOf(item)
        if (index !== -1) {
          this.worksList.splice(index, 1)
        }
      },
      addFans() {
        this.form.fansData.push({
          fansType: '',
          fansNumber: '',
          fansUrl: ''
        });
      },
      removeFans(item) {
        var index = this.form.fansData.indexOf(item)
        if (index !== -1) {
          this.form.fansData.splice(index, 1)
        }
      },
      addOption(value) {
        this.selectOptions = [];
        this.cityListPlace.push(this.getCascaderObj(value, this.cityList)[1]);
      },
      handleClose(value, index) {
        for (let i = 0; i < this.cityListPlace.length; i++) {
          let dic = this.cityListPlace[i];
          console.log(value);
          console.log(dic);
          if (value == dic.value) {
            this.cityListPlace.splice(i, 1);
            return;
          }
        }
      },
      getCascaderObj(val, opt){
        return val.map(function (value, index, array) {
          for (var itm of opt) {
            if (itm.value == value) {
              opt = itm.children;
              return itm;
            }
          }
          return null;
        });
      },
      // 获取城市列表
      getCity() {
        let self = this;
        self.$fetch("/Category/getCity", {}).then(res => {
          console.log(res.code);
          if (res.code == "200") {
            // res.data.forEach(element => {
            //   element.value = element.cityID;
            //   element.label = element.name;
            // });
            for (let i = 0; i < res.data.cityList.length; i++) {
              let province = res.data.cityList[i];
              province.value = province.id;
              province.label = province.name;
              for (let j = 0; j < province.cityList.length; j++) {
                let city = province.cityList[j];
                city.value = city.id;
                city.label = city.name;
              }
              province.children = province.cityList;
            }
            self.cityList = res.data.cityList;
            console.log(self.cityList)
          }
        });
        // 职业
        self.$fetch("/Category/getCategory", {gid: '1'}).then(res => {
          if (res.code == "200") {
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.jobList = res.data.Classification;
          }
        });
        // 国籍
        self.$fetch("/Category/getCategory", {gid: '3'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.raceList = res.data.Classification;
          }
        });
        // 语言
        self.$fetch("/Category/getCategory", {gid: '4'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.languageList = res.data.Classification;
          }
        });
        // 学校
        self.$fetch("/Category/getCategory", {gid: '5'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.salaryList = res.data.Classification;
          }
        });
        // 专业
        self.$fetch("/Category/getCategory", {gid: '6'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.professionalList = res.data.Classification;
          }
        });
        // 粉丝类型
        self.$fetch("/Category/getCategory", {gid: '7'}).then(res => {
          if (res.code == "200") {
            console.log(res);
            res.data.Classification.forEach(element => {
              element.value = element.classificationID;
              element.label = element.classificationName;
            });
            self.fansList = res.data.Classification;
          }
        });
      },
      changeFileVideo(file) {
        let self = this;
        console.log(file);
        var formDate = new FormData();
        formDate.append("file_video", file);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };

        self.$upload("/File/uploadsVideo", formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      changeFileImage(file) {
        let self = this;
        console.log(file.file);
        var formDate = new FormData();
        formDate.append("file_image", file.file, file.filename);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        self.$upload("/File/uploadsImage", formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      uploadFileImage(file) {
        let self = this;
        var formDate = new FormData();
        formDate.append("file_image", file.file);
        console.log(file.file);
        self.$upload("/File/uploadsImage", formDate).then(res => {
          if (res.code == "200") {
            if (this.form.photoID.length == 0) {
              this.form.photoID += res.data.fileId;
            } else {
              this.form.photoID += ',' + res.data.fileId;
            }
          } else {
          }
        });
      },
      uploadFileVideo(file) {
        let self = this;
        var formDate = new FormData();
        formDate.append("file_video", file.file);
        self.$upload("/File/uploadsVideo", formDate).then(res => {
          if (res.code == "200") {
            if (this.form.photoID.length == 0) {
              this.form.videoID += res.data.fileId;
            } else {
              this.form.videoID += ',' + res.data.fileId;
            }
          } else {
          }
        });
      },
      uploadImage() {
        console.log("1");

        this.$refs.upload.submit();
        this.formDate.append("file_image", "12133");
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        let self = this;
        self.$upload("/File/uploadsImage", self.formDate, config).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      uploadVideo() {
        let formDate = new FormData();
        let self = this;
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        formDate.append("file_video", file);
        self.$upload("/File/uploadsVideo", self.formDate).then(res => {
          if (res.code == "200") {
            console.log(res);
          } else {
          }
        });
      },
      isMobilePhone() {
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
          return true;
        } else {
          return false;
        }
      },
      onSubmit() {
        console.log("submit!");
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //退出登录
      goLogin(){
        sessionStorage.clear();
        this.$router.push({path: '/'});
      }
    },
  }
</script>

<style lang="less" scoped>
  /*.el-form-item {*/
  /*margin-bottom: 0px !important;*/
  /*}*/
  .textcolor {
    color: red;
    font-size: 9px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 70px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
    line-height: 70px;
  }

  .create {
    margin-top: 20px;
    margin-bottom: 60px;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    background-color: #b3302e;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .share {
    margin-top: 20px;
    width: 100px;
    height: 30px;
    border-radius: 4px;
    background-color: #b3302e;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .logout {
    margin-top: 20px;
    margin-left: 20px;
    width: 100px;
    height: 30px;
    border-radius: 4px;
    background-color: #b3302e;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .form-input {
    .el-form-item {
      margin-top: 20px;
    }
  }

  .artistAdd {
    width: 80%;
    margin: auto;
  }

  .appClass {
    width: 96%;
    padding: 2%;
    display: flex;
    flex-direction: column;
    .nameList {
      display: flex;
      flex-display: row;
      align-items: center;
      margin-top: 10px;
    }
    .appLabel {
      display: flex;
      width: 100%;
      flex-direction: row;
      align-items: center;
      padding: 4px 0px;
      justify-content: space-between;
    }
    .split {
      height: 1px;
      border: none;
      border-top: 1px dashed #bcbcbc;
      flex: 1;
      margin: auto;
    }
    img {
      width: 100%;
      height: auto;
    }
    .title {
      margin-top: 10px;
      font-weight: bold;
      font-size: 22px;
    }
    .grayColor {
      color: gray;
    }
  }

  .introduction {
    white-space: pre-line;
    width: auto;
    height: auto;
    word-wrap: break-word;
    word-break: normal;
    overflow: hidden;
    line-height: 20px;
  }

  .right_title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }

</style>
